<template>
  <div style="margin: 20px">
    <el-input disabled :value="$route.query.roleName"></el-input>
    <!-- default-checked-keys属性 默认勾选的节点的 key 的数组  -->
    <el-tree
      style="margin: 20px 0"
      ref="treeRef"
      :data="permissionList"
      node-key="id"
      show-checkbox
      default-expand-all
      :props="defaultProps"
      :default-checked-keys="authArr"
    />
    
    <el-button :loading="loading" type="primary" @click="save">保存</el-button>
    <el-button @click="cancel">取消</el-button>
  </div>
</template>

<script>
import { getAssignRoleApi, assignRoleApi } from "@/api/acl/role";

export default {
  data() {
    return {
      loading: false, // 正在加载中
      roleId: this.$route.query.id, // 获取角色id
      permissionList: [], // 角色拥有的所有权限
      // 树组件 配置项
      defaultProps: {
        children: "children",
        label: "name",
      },
      authArr:[], // 存放已有的权限的id
    };
  },

  methods: {
    // 方法  获取指定角色的权限列表
    async getPermissionList() {
      const res = await getAssignRoleApi(this.roleId);
      this.permissionList = res.data.children
      this.getCheckedId(this.permissionList)
    },


    // 方法  封装 获取所有选择的id列表方法 只用到所有选中的按钮权限id
    getCheckedId(auths){
      auths.forEach(item => {
        // 最深层次的数据只有四层
        if(item.select && item.level === 4){
          this.authArr.push(item.id)
        }else{
          // 递归
          this.getCheckedId(item.children)
        }
      })
    },


    // 方法 保存事件
    async save() {
      // 获取所有 全选状态按钮的id
      const checkedAllIds = this.$refs.treeRef.getCheckedKeys()
      // 获取所有 半选状态按钮的id
      const checkedHalfIds = this.$refs.treeRef.getHalfCheckedKeys()
      // 合并两个id 用, 隔开
      const newId = checkedAllIds.concat(checkedHalfIds).join(',')
      this.loading = true 
      const res = await assignRoleApi(this.roleId,newId)
      this.$message.success('分配权限' + res.message)
      this.loading = false
      await this.$router.replace('/acl/role')
    },
    // 方法 取消事件
    cancel() {
      this.$router.replace('/acl/role')
    },
  },

  created() {
    this.getPermissionList();
  },
};
</script>

<style></style>
